<template>
  <div class="echart">
    <div class="box">
      <p class="title">近三个月-店铺销量</p>
      <div id="cartogram" class="cartogram"></div>
    </div>
    <div class="box">
      <p class="title">上月-人气菜品</p>
      <div id="cartogram4" class="cartogram"></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        storeSale:[],
        foodSale:[],

        option4: {
          tooltip: {
            show: true,
            trigger: "item",
            axisPointer: {
              type: "shadow",
              // type: "line",用虚线显示在那一个柱子
            },
            backgroundColor: "rgba(0,0,0,0.5)",
            borderColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
            // 写了这个，提示框中的彩色圆点就消失了？？？？？不解
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            top: "bottom",
            textStyle: {
              color: "#7b84aa",
            },
            // 筛选标签为正方形
            itemWidth: 10,
            itemHeight: 10,
          },
          toolbox: {
            show: true,
            //   feature: {
            //     mark: { show: true },
            //     dataView: { show: true, readOnly: false },
            //     restore: { show: true },
            //     saveAsImage: { show: true },
            //   },
          },
          series: [{
            name: "地区分布",
            type: "pie",
            radius: [15, 75],
            center: ["50%", "50%"],
            // 如果不写，则显示普通扇形统计图
            // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 所有扇区圆心角相同，仅通过半径展现数据大小。
            roseType: "area",
            // roseType:'radius',//扇区圆心角展现数据的百分比，半径展现数据的大小
            itemStyle: {
              // 扇形图的圆角边框
              borderRadius: 0,
              textStyle: {
                color: "#fff",
              },
            },
            data: [{
                value: 40,
                name: "湖北"
              },
              {
                value: 38,
                name: "四川"
              },
              {
                value: 32,
                name: "浙江"
              },
              {
                value: 30,
                name: "江苏"
              },
              {
                value: 28,
                name: "河北"
              },
              {
                value: 26,
                name: "山东"
              },
              {
                value: 22,
                name: "北京"
              },
              {
                value: 18,
                name: "云南"
              },
            ],
            label: {
              // 字体标签颜色
              color: "inherit",
              bleedMargin: 1,
            },
          }, ],
        },
        option: {
          // 提示框
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              // type: "line",用虚线显示在那一个柱子
            },
            backgroundColor: "rgba(0,0,0,0.5)",
            borderColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [{
            type: "category",
            data: [],
            // 刻度
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                // color:'#8c92a6'
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLabel: {
              color: "#8b90a6",
            },
          }, ],
          yAxis: [{
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                // color:'#8c92a6'
                color: "rgba(255,255,255,0.1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLabel: {
              color: "#8b90a6",
            },
          }, ],
          // 系列
          series: [{
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            // 数值
            data: [],
            barWidth: "40%",
            itemStyle: {
              borderRadius: 5,
              color: "#2f89cf",
            },
          }, ],
        },
      };
    },



    mounted() {
        this.getStoreSale();
        this.getFoodSale();
    },

     methods: {
       getStoreSale(){

         this.$http.get("/foodMonthSale/showStoreSale").then(resp=>{
           if(resp.data.code==200){
              console.log(resp.data.data);
              this.storeSale = resp.data.data;
              // 柱形图
              let myCharts = echarts.init(document.getElementById("cartogram"));
              myCharts.setOption(this.option);
              
               let data  = this.storeSale;
               
               ////////////////////////
               
               this.option.xAxis[0].data = data.map((i) => i.dateStr);
               this.option.series[0].data = data.map((i) => i.count);
               myCharts.setOption(this.option);
           }
         })
       },

       getFoodSale(){
         this.$http.get("/foodMonthSale/showFoodSale").then(resp=>{
           if(resp.data.code==200){
             console.log(resp.data.data);
             this.foodSale = resp.data.data;
             
             // 饼图
             let myCharts4 = echarts.init(document.getElementById("cartogram4"));
                   let data4 = this.foodSale;
                   this.option4.series[0].data = data4.map(i => {
                     return {
                       name: i.foodName,
                       value: i.count
                     }
                   });
                   myCharts4.setOption(this.option4);
           }
         })
       },
     },

    created(){
      // /////////////////////////// 获取数据,
        this.getStoreSale();
        this.getFoodSale();

    }
  };
</script>

<style scoped>
  .echart {
    background-color: #fff;
    display: flex;

  }


  .box {
    width: 500px;
    height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cartogram {
      width: 100%;
      height: 100%;
    }

    >p {
      position: absolute;
      top: 0px;
      left: 0px;
      font-size: 18px;
      color: gray;
      height: 0.75rem;
      z-index: 10;
      width: 100%;
      text-align: center;
    }
  }
</style>

